<template>
  <div class="addmore">
      <el-input type="textarea" :rows="30" placeholder="请粘贴进内容" v-model="word" class="input">
      </el-input>
      <div class="btnarea">
          <el-button class="btn1" @click="cutOff()">查看</el-button>
          <el-button v-if="cuted.length>0" class="btn2" type="primary" @click="save()" :loading="buttonLoading">提交</el-button>
      </div>
      
      <div class="content">
          <div v-for="(item,index) in cuted" :key="index">
              {{item.text}} 
              <span>
                  [正确答案：
                    <span class="red" v-if="item.type === 0">{{item.answer | SelectType}}</span>
                    <span class="red" v-else>{{item.answer | JudgeType}}</span>
                  ]
              </span>
              <div v-for="(msg,index) in item.select" :key="index" class="select" :class="index === item.answer ? 'blue' : ''">
                  {{index | SelectType}}、{{msg}}
              </div>
              <div class="line"></div>
          </div>
      </div>
  </div>
</template>

<script>
import {add} from '@/api/question'
export default {
  data(){
      return {
          buttonLoading: false,
          word: '',
          cuted: []
      }
  },
  methods:{
      cutOff(){
          this.cuted = []
          console.log(this.word)
          let a =  this.word.split('\n') //每行分开
          a.forEach(item => {
              if(!isNaN(parseInt(item.substring(0,1)))){ //判断分割出每行第一个字符是否为数字
                  let answer = item.substring(item.length-2,item.length-1)  //截取字符串倒数第2位
                  let text = item.substring(0,item.length-3)  //截取字符串其他
                  let obj = { 
                    text : text,
                    select : [],
                    answer : this.formateAnswer(answer), 
                    type: this.formateType(answer)
                  }
                  this.cuted.push(obj)
              }else{
                 this.pushSelect(item)
              }
          });
          console.log(this.cuted,'bbbbb')
      },
      formateAnswer(answer){
          switch(answer){
              case "A":
              case "对":
                return 0;
              case "B":
              case "错":
                return 1;
              case "C":
                return 2;
              case "D":
                return 3;
              default:;
          }
      },
      formateType(answer){
          switch(answer){
              case "A":
              case "B":
              case "C":
              case "D":
                return 0;
              case "对":
              case "错":
                return 1;
              default:;
          }
      },
      pushSelect(item){
          let i = this.cuted.length - 1 //此时数组长度未发生变化，i为上一次push进数组的项，从而将ABCD选项放入
          let msg = item.substring(2,item.length)
          this.cuted[i] && this.cuted[i].select.push(msg)
        //   console.log(i,this.cuted[i].select) 
      },
      save(){
          this.cuted.forEach(item => {
              item.date = Date.parse(new Date())
          });
          console.log(this.cuted,'sss')
          this.buttonLoading=true
          add(this.cuted)
          .then((res)=>{
              console.log(res)
              if(res.status === 200){
                this.$message.success("新增成功!即将跳转");
                setTimeout(()=>{
                    this.buttonLoading = false;
                    this.$router.push('/question')
                },1500)
             } 
          })
          .catch((err) => { 
             this.buttonLoading = false;
             this.$message.error("新增失败!请调整格式或手动添加")
          });
      }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped >
.addmore{
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
}
.btnarea{
    display: flex;
    flex-direction: column;
}
.btn1{
    width: 100px;
    height: 100px;
    margin: 50px;
}
.btn2{
    width: 100px;
    height: 100px;
    margin: 50px;
    margin-left: 50px !important;
}
.input{
    width: 40%;
}
.content{
    width: 40%;
}
.red{
    color: red;
}
.content{
    height: 100%;
}
.content div {
    margin-bottom: 20px;
    margin-top: 10px;
}
.select{
    font-size: 14px;
}
.blue{
    color: blue;
}
.line{
  clear:both;
  border-top:1px dashed #cccccc;
  height: 1px;
  overflow:hidden;
  margin-top:40px
}
</style>